<template>
  <el-row>
    <el-card>
      <el-col :span="24">
        <div class="table_content" style="margin-bottom: 1px">
          <el-row :gutter="4">
            <el-form
              :inline="true"
              label-position="left"
              class="demo-form-inline"
              label-width="100px"
            >
              <el-form-item>
                <el-input
                  class="mr5 sh"
                  placeholder="请输入关键字"
                  v-model="searchDto.keywords"
                ></el-input>
              </el-form-item>
              <el-form-item class="clear_item-margin-bottom">
                <el-button type="primary" icon="el-icon-search" @click="search"
                  >查询
                </el-button>
                <el-button type="primary" icon="el-icon-s-open" @click="clear"
                  >重置</el-button
                >
                <el-button
                  type="primary"
                  icon="el-icon-circle-plus"
                  @click="addData"
                  >新增常用语
                </el-button>
              </el-form-item>
            </el-form>
          </el-row>
        </div>
        <div class="table_content">
          <page-table
            ref="multipleSelection"
            :page-data="pageData"
            :loading="loading"
            :do-get-page-data="getData"
          >
            <el-table-column
              prop="name"
              label="常用语"
              align="center"
              show-overflow-tooltip
            >
            </el-table-column>

            <!-- <el-table-column prop="status" label="状态" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.status | keyText("USE_STATUS") }}</span>
              </template>
            </el-table-column> -->
            <el-table-column
              label="管理"
              width="150"
              align="center"
              fixed="right"
            >
              <template slot-scope="scope">
                <el-tooltip content="编辑" placement="top">
                  <el-button
                    type="button"
                    size="mini"
                    icon="el-icon-edit"
                    @click="edit(scope.row)"
                  >
                  </el-button
                ></el-tooltip>
                <el-tooltip content="删除" placement="top"
                  ><el-button
                    size="mini"
                    icon="el-icon-delete"
                    @click="del(scope.row)"
                  >
                  </el-button
                ></el-tooltip>
              </template>
            </el-table-column>
          </page-table>

          <el-dialog
            :visible.sync="showDialog"
            title="新增 / 编辑 选项"
            width="40%"
          >
            <el-form
              ref="form"
              :model="form"
              :rules="rules"
              :gutter="10"
              label-width="120px"
            >
              <el-form-item label="常用语" prop="name">
                <el-input v-model="form.name"></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button type="primary" @click="save">保存 </el-button>
              <el-button @click="showDialog = false">取消 </el-button>
            </div>
          </el-dialog>
        </div>
      </el-col>
    </el-card>
  </el-row>
</template>
<script>
export default {
  name: "systemLanguage",
  created() {
    this.getData();
  },
  mounted() {},
  data() {
    return {
      type: "SYSTEM",
      pageData: {},
      loading: false,
      showDialog: false,
      searchDto: {
        keywords: "",
      },
      form: {},
      rules: {
        name: [{ required: true, message: "请输入常用语", trigger: "blur" }]
      }
    };
  },
  methods: {
    search(){
      this.getData(this.searchDto)
    },
    getData(v = {}) {
      v.type = this.type;
      this.API.getCommonLanguagePageList(v).then(ret => {
        this.pageData = ret.data;
      });
    },
    addData() {
      this.form = {};
      this.showDialog = true;
    },
    clear() {
      this.getData();
    },
    save() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          let body = this.form;
          body.type = this.type;
          this.API.addOrUpdateCommonLanguage({ body }).then(ret => {
            this.showDialog = false;
            this.$message({
              type: "success",
              message: "添加成功"
            });
            this.getData();
          });
        } else {
          return false;
        }
      });
    },
    edit({ id }) {
      this.showDialog = true;
      this.API.getCommonLanguageById({ id }).then(ret => {
        this.form = ret.data;
      });
    },
    del({ id }) {
      this.$confirm("确认删除当前字典?", "提示", {}).then(() => {
        this.API.deleteCommonLanguageById({ id }).then(ret => {
          this.$message({
            type: "success",
            message: "删除成功"
          });
          this.getData();
        });
      });
    }
  }
};
</script>

<style scoped></style>
